<template>
  <div id="loginPage" class="login-page">
    <h1 class="title">
      <img :width="100" src="@/assets/favicon.svg" />醫師佣金系統
    </h1>
    <a-form
      class="login-form"
      :model="formParams"
      name="basic"
      :label-col="{ span: 8 }"
      :wrapper-col="{ span: 16 }"
      label-align="left"
      autocomplete="off"
      @finish="handleLogin"
      @finishFailed="onFinishFailed"
    >
      <a-form-item
        label="用戶名"
        name="username"
        :rules="[{ required: true, message: '請輸入您的用戶名!' }]"
      >
        <!-- <a-input v-model:value="formState.username" /> -->
        <a-input v-model:value="formParams.username" autocomplete="username">
          <template #prefix>
            <UserOutlined class="site-form-item-icon" />
          </template>
        </a-input>
      </a-form-item>

      <a-form-item
        label="密碼"
        name="password"
        :rules="[{ required: true, message: '請輸入您的密碼!' }]"
      >
        <a-input-password
          v-model:value="formParams.password"
          autocomplete="current-password"
        >
          <template #prefix>
            <LockOutlined class="site-form-item-icon" />
          </template>
        </a-input-password>
      </a-form-item>

      <!-- <a-form-item name="記住" :wrapper-col="{ offset: 8, span: 16 }">
        <a-checkbox v-model:checked="formParams.remember">Remember me</a-checkbox>
      </a-form-item> -->

      <a-form-item :wrapper-col="{ offset: 0, span: 24 }">
        <a-button
          type="primary"
          html-type="submit"
          class="login-form-button"
          :loading="loading"
          >登錄</a-button
        >
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
import { useRouter } from "vue-router";
import { authApi } from "@/api";
import { useAuthUserStore } from "@/store/authUserStore";
import { message } from "ant-design-vue";

interface FormParams {
  username: string;
  password: string;
  remember: boolean;
}

const formParams = reactive<FormParams>({
  username: "",
  password: "",
  remember: true,
});

const authUserStore = useAuthUserStore();
const router = useRouter();

const loading = ref(false);
const handleLogin = async () => {
  try {
    loading.value = true;
    const { data } = await authApi.loginRequest(formParams);
    authUserStore.saveData(data);
    router.replace("/dashboard");
    message.success("登錄成功");
  } catch (error) {
    console.log("登錄失敗", error);
  } finally {
    loading.value = false;
  }
};

const onFinishFailed = (errorInfo: any) => {
  console.log("Failed:", errorInfo);
};
</script>

<style scoped>
#loginPage {
  background-color: #f0f2f5;
  /* 添加背景色 */
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#loginPage .login-form {
  max-width: 480px;
  background-color: #fff;
  padding: 50px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

#loginPage .title {
  font-size: 28px;
  font-weight: bold;
  color: #b22;
  margin-bottom: 20px;
}

#loginPage .login-form-button {
  width: 100%;
  height: 40px;
  border-radius: 4px;
}
</style>
